import { Input } from "antd"
import { forwardRef, Ref, useImperativeHandle, useState } from "react"

import { SFormItem } from "@/components/common"
import ComplexInput from "@/components/common/complexInput"
import { useLocale } from "@/locales"

const PropoxyFlag = (props: any, ref: Ref<unknown> | undefined) => {
	const { options, onTypeChange } = props
	const { newFormat } = useLocale()
	const optionsShow = options || [
		{
			label: newFormat("dxn.card_ables_list.member_account"),
			value: "userName"
		},
		{
			label: newFormat("funds.proxy_member_funds_record.parent_proxy_name"),
			value: "parentProxyName"
		},
		{
			label: newFormat("common.updateBy"),
			value: "operator"
		}
	]
	const [field, setField] = useState(options?.[0]?.value || "userName")
	useImperativeHandle(ref, () => {
		return {
			setField
		}
	})
	return (
		<ComplexInput
			options={optionsShow}
			value={field}
			onTypeChange={(value: string) => {
				setField(value)
				onTypeChange(value)
			}}
		>
			<SFormItem name={field}>
				<Input placeholder={newFormat({ id: "label.please_input" })} />
			</SFormItem>
		</ComplexInput>
	)
}

export default forwardRef(PropoxyFlag)
